<!--
 @description 分配跟进人(导购)
 @fileName index.vue
 @author zengqiongying
 @created 2022/11/06 14:09:44
-->
<template>
  <div class="allocation-page" :class="{'page-has-bottom':selectedDataList.length>0,'larg-head':!!sharingEmpName}">
    <ComHeader title="分配跟进人" bg-color="#FFFFFF" />
    <div class="allocation-head">
      <Cell v-if="sharingEmpName" title="分享人" default-value="--" :value="sharingEmpName" readonly />
      <FieldPicker
        v-model="formData.shopDeptCode"
        :label.sync="formData.shopDeptName"
        title="选择门店"
        placeholder="请选择"
        :url="`/app/v1/organization/dis/queryMySaleDeptByDisCode/${clueDisCode}`"
        label-name="orgName"
        value-name="orgCode"
        method="get"
        :disabled="!ablePosition"
        :params="shopParams"
        @change="handlerShopDeptChange"
      />
      <div class="designer-search">
        <van-search
          v-model="searchValue"
          show-action
          class="search-field"
          placeholder="搜索姓名"
          @search="handleSearch"
          @cancel="handleSearch"
          @clear="handleSearch"
        >
          <template #action>
            <svg-icon class="icon-search" icon-class="sousuo-solid" @click.native.stop="handleSearch" />
          </template>
        </van-search>
      </div>
    </div>
    <div class="allocation-head-place" />
    <div v-if="selectedDataList.length>0" class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" @click="handlerConfirm">确定</van-button>
    </div>
    <div class="designer-list">
      <GuideList
        v-if="formData.shopDeptCode"
        ref="list"
        :search-value="searchValue"
        :dis-org-codes="[formData.shopDeptCode]"
        :position-codes="['top_shopping_mg', 'top_shopping_guide']"
        show-customer-count
        @select-change="handleDeignerChange"
      />
    </div>
  </div>
</template>

<script>
import Cell from '@/components/ListCell'
import FieldPicker from '@/components/FieldPicker'
import GuideList from '../components/EmployeeList'
import { bus } from '@/utils/bus'
import { assignGuide, getDisDetail } from '@/apis/customer'
export default {
  name: 'CustomerAllocation',
  components: { Cell, FieldPicker, GuideList },
  filters: {},
  mixins: [],
  data() {
    return {
      clueCustomerId: this.$route.query.id, // 当前线索客户Id
      clueDisCode: this.$route.query.disCode, // 当前客户对应经销商
      formData: {
        shopDeptCode: '', // 门店组织编码
        shopDeptName: '', // 门店组织名称
        shopName: '',
        shopCode: '',
        disCode: '',
        disName: ''
      },
      sharingEmpName: '', // 分享人
      searchValue: '',
      selectedDataList: []// 当前所选导购
    }
  },
  computed: {
    // 允许操作的职务：线上对接人 top_online_mg ，经理 top_dis_mg ，店长 top_shop_mg
    ablePosition() {
      const t = this.$store.getters.userInfo
      return t.positionCodes.some(v => ['top_online_mg', 'top_dis_mg', 'top_shop_mg'].includes(v))
    },
    shopParams() {
      // 有线上对接人 top_online_mg 或经理 top_dis_mg 职位时：可选客户上挂的经销商下的销售部门 queryDirect=0
      // 否则再判断有没有店长职务，有则：可选客客户上挂的经销商下的我的直挂销售部门 queryDirect=1
      const params = {
        type: 1
      }
      const t = this.$store.getters.userInfo
      if (this.ablePosition) {
        const flag = t.positionCodes.some(v => ['top_online_mg', 'top_dis_mg'].includes(v))
        return { ...params, query: { queryDirect: flag ? 0 : 1 }}
      }
      return params
    }
  },

  created() {
    getDisDetail(this.clueCustomerId).then(res => {
      this.sharingEmpName = (res.data && res.data.sharingEmpName) || ''
    })
  },
  activated() {},

  mounted() {},

  methods: {
    handlerShopDeptChange(v) {
      v = v || {}
      this.$set(this.formData, 'shopName', v.mdmOrgName || '')
      this.$set(this.formData, 'shopCode', v.mdmOrgCode || '')
      this.$set(this.formData, 'disCode', v.disCode || '')
      this.$set(this.formData, 'disName', v.disName || '')
      this.handleSearch()
    },
    handleDeignerChange(data) {
      this.selectedDataList = data.map(v => {
        return v
      })
    },
    handlerConfirm() {
      if (this.selectedDataList.length === 0) {
        this.$toast('请选择导购!')
        return
      }
      const data = {
        clueCustomerId: this.clueCustomerId,
        remark: this.formData.remark,
        saveUsers: this.selectedDataList.map(e => {
          return {
            employeeId: e.id,
            employeeName: e.name,
            userAccount: e.account,
            userId: e.userId
          }
        }),
        shopDeptCode: this.formData.shopDeptCode,
        shopDeptName: this.formData.shopDeptName,
        shopCode: this.formData.shopCode,
        shopName: this.formData.shopName
      }
      assignGuide(data).then(res => {
        this.$toast('操作成功')
        bus.$emit('refreshCustomerItem', {
          title: '分配跟进人',
          type: 'allocation',
          id: this.clueCustomerId
        })
        this.$router.go(-1)
      })
    },
    handleSearch() {
      if (!this.formData.shopDeptCode) {
        this.$toast('请先选择门店')
        return
      }
      this.$nextTick(() => {
        this.$refs.list && this.$refs.list.resetPageData()
      })
    }
  }
}

</script>
<style lang='less' scoped>
.allocation-page{
  background: #fff;
}
.allocation-head-place{
  height: 128px;
}
.allocation-head{
  position: fixed;
  z-index: 9;
  left: 0;
  top: 46px;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.07);
  .designer-search{
    padding:16px;
    .search-field{
      background:rgba(241, 241, 242, 0.5);
      border-radius: 6px;
      height: 44px;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 10px;
    }
    /deep/.van-search__content{
      padding-left: 0;
      .van-field__left-icon{
        display: none;
      }
    }
    .icon-search{
      width: 20px;
      height: 20px;
      font-size: 20px;
      color: #16BC83;
    }
  }
}
.designer-list{
  position: relative;
  min-height: calc(100vh - 46px - 128px);
  padding: 0 16px;
}
.page-has-bottom .designer-list{
  padding-bottom: 80px;
}

.larg-head{
  .allocation-head-place{
    height: 180px; // 128 + 52
  }
  .designer-list{
    min-height: calc(100vh - 46px - 128px - 52px);
  }
}
</style>
